<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            border: 1px solid transparent;
            margin: 50px;
        }

        #box.active {
            border-color: red;
        }
    </style>
</head>

<body>
    <div id="box" class="one two three"></div>
</body>
<script>



    var box = document.getElementById("box");

    console.log(box.className);

    // 操作class名列表中的某一个  => 自己写

    // var list = box.className.split(" ");
    // console.log(list);

    // // 判断是否存在
    // console.log(list.includes("two"));

    // // 判断是否存在four => 没有就新增
    // if (!list.includes("four")) {
    //     list.push("four");
    // }

    // box.className = list.join(" ");
    // // console.log(box);


    // // 判断是否存在four  => 有就删除

    // if (list.includes("four")) {
    //     var index = list.indexOf("two");
    //     list.splice(index, 1);
    // }
    // box.className = list.join(" ");
    // console.log(box);


    // // 判断是否存在two => 有就修改

    // if (list.includes("two")) {
    //     var index = list.indexOf("two");
    //     list.splice(index, 1,"second");
    // }
    // box.className = list.join(" ");
    // console.log(box);






    // classList的相关方法   class名的增 删 改 查 切换
    // add()      向匹配的元素中追加一个或多个class名 (没有就新增,有就忽略)  => 返回值:undefined
    // remove()   删除匹配元素中一个或多个class名 (有就删除 没有就忽略)  => 返回值:undefined
    // replace()  在匹配的元素中 将一个class名替换为新的class名   => 返回值: 替换成功 => true 失败=>false
    // contains() 判断匹配的元素中是否存在某个class名 => 返回值 存在 => true  不存在 => false  

    // toggle()   判断匹配的元素中是否存在某个class名, 没有就新增 有就删除

    console.log(box.classList);

    var result = box.classList.add("four", "five", "six");
    console.log("result:", result);

    var result = box.classList.remove("four", "five", "six");
    console.log("result:", result);

    var result = box.classList.replace("two", "second");
    console.log("result:", result);


    console.log(box.classList.contains("one"));
    console.log(box.classList.contains("two"));
    console.log(box.classList.contains("three"));


    box.onclick = function () {
        this.classList.toggle("active");
    }

    console.log(box);


    // 总结
    // className  常用于操作单class名(只有一个  直接覆盖)
    // classList  常用于操作多class名(对其中的一个进行修改)







</script>

</html>